// 1.找到图片
let image =$('#image')
// 2.剪裁的配置项
let option = {
  // 剪裁框的宽高比
  aspectRatio:1,
  // 预览
  preview:'.img-preview'
}
// 3.初始化剪裁框
image.cropper(option)
// -----------------点击上传,能够选择图片
// 根据内容的jQuery选择器
// $('button:contains("上传")')表示选择内容包含上传的button
$('button:contains("上传")').on('click',function () {
  // 触发文件域的单击事件
  $('#file').trigger('click')

})
// ---------------------------更换剪裁区的图片
$('#file').on('change',function () {
  // 输出文件域的dom对象
  // 如果选择了文件,那么获取文件对象
  if(this.files.length>0){
    let fileObj = this.files[0]
    // 转成url 本地预览图片
    let url = URL.createObjectURL(fileObj)
    // console.log(url);
    // /更换剪裁区图片
    //  cropper 内置的替换图片的方法
    // image.cropper('方法名',方法参数)
    // 
    image.cropper('replace',url)
  }
  
})
// ----------------------提交文件到服务器 完成更换
$('button:contains("确定")').on('click',function () {
  // 调用剪裁插件的方法,剪裁图片
  let canvas = image.cropper('getCroppedCanvas',{width:30,height:30})
// 得到的canvas式画布,canvas是h5中的一个html标签,以及一套绘图API
// 把canvas转成base64格式
let base64 = canvas.toDataURL()//toDataURL()S是原生的方法,作用是把canvas转换成base64格式
$.ajax({
  type:'POST',
  data:{avater:base64},
  success:function () {
    if(res.status === 0){
      // 提示
      layer.msg(res.message)
      // 调用父元素的函数,完成头像更新
      window.parent.getUserInfo()
    }
  }
})
})